<template>
     <view class="hbox">
        <view class="hbox-top">
            <view class="top-item">个人信息</view>
            <view class="top-item">注册时间</view>
        </view>
        <view class="hbox-list">
            <view class="hbox-item" v-for="(l,i) in 25" :key="i">
                <view class="hbox-item-left">
                    <img :src="$imgurl+'/static/images/empty.png'" alt="" class="left-avatar">
                    <view class="left-box">
                        <view class="name f26 pf w500 t333">
                            用户姓名{{i}}
                        </view>
                        <view class="id f24 pf w500 txc">
                            ID:86887123
                        </view>
                    </view>
                </view>
                <view class="hbox-item-right">
                    <view class="time f24 pf w500 txc">
                        2021-05-28 15:09
                    </view>
                    <view class="count">
                        <view class="ding f24 pf w500 txc">
                            订单 : <text class="colors"> {{ 2}}</text>
                        </view>
                        <view class="shou f24 pf w500 txc">
                            收货 : <text class="colors">{{ 2}}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>


<script>
export default {
    
}
</script>

<style lang="scss" >
.hbox{
    margin-top:32rpx;
    width:100%;
    background: #FFFFFF;
    box-shadow: 0px 2rpx 2rpx 0px rgba(175, 175, 175, 0.09);
    border-radius: 30rpx;
    // flex:1;
    max-height: calc(100% - 100rpx);

    display: flex;
    flex-direction: column;
    .hbox-top{
        width:100%;
        display: flex;
        height:110rpx;
        border-bottom: 1rpx solid #EEEEEE;
        .top-item{
            flex:1;
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #222222;
            line-height: 110rpx;
            text-align: center;
        }
    }
    .hbox-list{
        flex:1;
        overflow: auto;

        .hbox-item{
            width:100%;
            height:110rpx;
            border-bottom: 1rpx solid #EEEEEE;
            display: flex;
            &-left{
                flex:1;
                display: flex;
                justify-content: center;
                align-items: center;
                .left-avatar{
                    width:60rpx;
                    height:60rpx;
                    border-radius: 50%;
                    margin-right:24rpx;
                }
                .left-box{
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    .name{
                        margin-bottom:8rpx;
                    }
                }
            }
            &-right{
                flex:1;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                .time{
                    width:220rpx;

                }   
                .count{
                    margin-top:15rpx;
                    display: flex;
                    width:220rpx;
                    justify-content: space-between;
                    .colors{
                        color: #C52518;
                    }
                }
            }
        }

    }
}
</style>
